<template>
  <div class="uploadInfo">
    <div class="cell">
      <p class="cell-title">身份证</p>
      <!-- <van-uploader :after-read="afterRead" accept="image/*" multiple/>
      <img class="head-img" src="" ref="goodsImg"/> -->
      <div class="idCardbox">
        <div>
          <van-uploader preview-size='100px' :after-read="afterReada" :before-delete="deletea" v-model="fileData.fileLista" multiple :max-count="1" />
          <p>身份证正面</p>
        </div>
        <div>
          <van-uploader preview-size='100px' :after-read="afterReadb" :before-delete="deleteb" v-model="fileData.fileListb" multiple :max-count="1" />
          <p>身份证反面</p>
        </div>
      </div>
    </div>
    <div class="cell" style="margin-top:20px">
      <p class="cell-title">驾驶证</p>
      <!-- <van-uploader :after-read="afterRead" accept="image/*" multiple/>
      <img class="head-img" src="" ref="goodsImg"/> -->
      <div class="idCardbox">
        <div>
          <van-uploader preview-size='100px' :after-read="afterReadc" :before-delete="deletec" v-model="fileData.fileListc" multiple :max-count="1" />
          <p>驾驶证正面</p>
        </div>
        <div>
          <van-uploader preview-size='100px' :after-read="afterReadd" :before-delete="deleted" v-model="fileData.fileListd" multiple :max-count="1" />
          <p>驾驶证反面</p>
        </div>
      </div>
    </div>
    <div class="btn-container">
      <van-button class="btn-large" @click="submitForm">提交</van-button>
    </div>
    <div class="loadingbox" v-show="isloading">
        <van-loading size="50px" class="loading" vertical>识别中...</van-loading>
    </div>
    <div>
      
    </div>
  </div>
</template>

<script>

  export default{
    data(){
      return {
        isloading:false,
        fileData:{
          fileLista:[],
          fileListb:[],
          fileListc:[],
          fileListd:[],
        },
         form:{
          btnDisabled:true,
          btnLoading:false,
        },
        isfileLista:false,
        isfileListb:false,
        isfileListc:false,
        isfileListd:false,
        idcardnum:'',
        drivingnum:'',
        idcardname:''
      }
    },
    methods:{
      deletea(){
        this.isfileLista = false;
        return true
      },
      deleteb(){
        this.isfileListb = false;
        return true
      },
      deletec(){
        this.isfileListc = false;
        return true
      },
      deleted(){
        this.isfileListd = false;
        return true
      },
      tophoto(url,file,type){
      //   this.photoshow=true
        this.isloaded=false
        var that = this;
        const inputFile = file;
        let reader = new FileReader();     //html5读文件
        reader.readAsDataURL(inputFile);  //转BASE64 
        console.log(reader)
        reader.onloadend = function() {
          let result = this.result
          let img = new Image()
          img.src = result
          // console.log('********未压缩前的图片大小********')
          // console.log(result.length / 1024)
          img.onload = function() {
              let data = that.compress(img, 0.3)
              // data=data.split(",")
              //  console.log(data[1])
              // console.log(that.convertBase64UrlToBlob(data[1]))
              var timestamp = (new Date()).getTime();
              let filelittle = that.base64ToFile(data,timestamp)
              that.recognition(url,filelittle,type)
              // return data[1]
              // that.photoupload(data[1])
              
          }
        }
      },
      //将base64转换为blob
    base64ToFile(urlData, fileName) {
        let arr = urlData.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        let bytes = atob(arr[1]); // 解码base64
        let n = bytes.length
        let ia = new Uint8Array(n);
        while (n--) {
            ia[n] = bytes.charCodeAt(n);
        }
        return new File([ia], fileName, { type: mime });
    },
    //调用
    
      // 压缩图片
      compress(img, size) {
          let canvas = document.createElement('canvas')
          let ctx = canvas.getContext('2d')
          // let initSize = img.src.length
          let width = img.width
          let height = img.height
          canvas.width = width
          canvas.height = height
          // 铺底色
          ctx.fillStyle = '#fff'
          ctx.fillRect(0, 0, canvas.width, canvas.height)
          ctx.drawImage(img, 0, 0, width, height)
          //进行最小压缩
          let ndata = canvas.toDataURL('image/jpeg', size)
          // console.log(canvas.toDataURL())
          // console.log('*******压缩后的图片大小*******')
          // console.log(ndata)
          // console.log(ndata.length / 1024)
          return ndata
      },
      recognition(url,file,side){
        let _this = this;
        let data = new FormData()
        data.append('file', file)
        data.append('side', side)
        this.$post(url,data).then(res=>{
          console.log(res)
          _this.$toast(res.msg);
          this.isloading = false
          if(res.code=='200'){
            if(url=='/applyvehicle/checkIdCard'&&side=='face'){
              _this.idcardnum= res.data.num;
              _this.idcardname = res.data.name;
              _this.isfileLista = true;
              sessionStorage.setItem("idCardFace",res.imgUrl)
              sessionStorage.setItem("idCardFaceInfo",JSON.stringify(res.data))
            }
            if(url=='/applyvehicle/checkIdCard'&&side=='back'){
              _this.isfileListb = true;
               sessionStorage.setItem("idCardBack",res.imgUrl)
               sessionStorage.setItem("idCardBackInfo",JSON.stringify(res.data))
            }
            if(url=='/applyvehicle/driverInfo'&&side=='face'){
              _this.drivingnum= res.data.num;
              _this.isfileListc = true;
              sessionStorage.setItem("driverFace",res.imgUrl)
              sessionStorage.setItem("driverFaceInfo",JSON.stringify(res.data))
            }
            if(url=='/applyvehicle/driverInfo'&&side=='back'){
              _this.isfileListd = true;
              sessionStorage.setItem("driverback",res.imgUrl)
              sessionStorage.setItem("driverbackInfo",JSON.stringify(res.data))
            }
          }else{
            if(url=='/applyvehicle/checkIdCard'&&side=='face'){
              _this.isfileLista = false;
              ssionStorage.removeItem('idCardFace');
            }
            if(url=='/applyvehicle/checkIdCard'&&side=='back'){
              _this.isfileListb = false;
              ssionStorage.removeItem('idCardBack');
            }
            if(url=='/applyvehicle/driverInfo'&&side=='face'){
              _this.isfileListc = false;
              ssionStorage.removeItem('driverFace');
            }
            if(url=='/applyvehicle/driverInfo'&&side=='back'){
              _this.isfileListd = false;
              ssionStorage.removeItem('driverback');
            }
          }
           
        })
      },
      afterReada(file) {
        this.isloading=true
        // 此时可以自行将文件上传至服务器
        // let _this=this;
        // let params = {
        //   file:file.file,
        //   side:'face'
        // }
        this.tophoto('/applyvehicle/checkIdCard',file.file,'face')
        // let filelis = this.tophoto(file.file)
        // this.recognition('/applyvehicle/checkIdCard',file.file,'face')
        // let data = new FormData()
        // data.append('file', file.file)
        // data.append('side', 'face')
        // this.$post('/applyvehicle/checkIdCard',data).then(res=>{
        //   console.log(res)
        //   if(res.code=='200'){
        //     this.$toast(res.msg);
        //   }else{
        //     this.$toast(res.msg);
        //   }
        // }).catch(error=>{
        //   console.log(error)
        // })
      },
      afterReadb(file) {
        this.isloading=true
        this.tophoto('/applyvehicle/checkIdCard',file.file,'back')
        // this.recognition('/applyvehicle/checkIdCard',file.file,'back')
        console.log(file);
      },
      afterReadc(file) {
        this.isloading=true
        this.tophoto('/applyvehicle/driverInfo',file.file,'face')
        // this.recognition('/applyvehicle/driverInfo',file.file,'face')
        console.log(file);
      },
      afterReadd(file) {
        this.isloading=true
        this.tophoto('/applyvehicle/driverInfo',file.file,'back')
        // this.recognition('/applyvehicle/driverInfo',file.file,'back')
        console.log(file);
      },
      submitForm(){
        if(!this.isfileLista){
          this.$toast('身份证正面有误，请重新上传');
          return false
        }
        if(!this.isfileListb){
          this.$toast('身份证反面有误，请重新上传');
          return false
        }
        if(!this.isfileListc){
          this.$toast('驾驶证正面有误，请重新上传');
          return false
        }
        if(!this.isfileListd){
          this.$toast('驾驶证反面有误，请重新上传');
          return false
        }
        if(this.idcardnum!=this.drivingnum){
          this.$toast('身份证与驾驶证不一致，请重新上传');
          return false
        }
        sessionStorage.setItem('useridname',this.idcardname)
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="scss" scoped>
.loadingbox {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    .loading{
      width: 130px;
      height: 130px;
      background: rgba(0,0,0,.5);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
    .van-loading__text{
      color: #fff;
    }
  }
  .uploadInfo{
    width: 100%;
    height: 100vh;
    font-size: 16px;
    color: #333;
    background: #f0f0f0;
    .cell-title{
      border-bottom: 1px #f0f0f0 solid;
      line-height: 40px;
      padding: 0 20px;
      background: #fff;
    }
    .idCardbox{
      display: flex;
      justify-content: space-around;
      background: #fff;
      padding: 15px;
      p{
        text-align: center;
        line-height: 20px;
        font-size: 14px;
        margin: 0;
      }
    }
    .btn-container{
      margin-top: 20px;
      padding:0 20px;
      .van-button{
        color:white!important;
        width:100%;
        background-color: #ad2f2f;
        height:40px;
        border-radius:45px;
      }
    }
    
  }
</style>
